<link rel="stylesheet" href="${base}/assets/plugins/cropper/cropper.min.css">

<div class="wrapper">
    <div class="row cropper-wrapper cropper-circle ">
        <div class="col-xs-8">
            <div class="img-container">
                <img id="image" src="" >
            </div>
        </div>
        <div class="col-xs-4 pl0">
            <div class="clearfix">
                <div class="img-preview preview-md"></div>
                <div class="img-preview preview-sm"></div>
                <div class="img-preview preview-xs"></div>
            </div>
            <div class="clearfix mt20"></div>
            <div class="btn-group">
                <button type="button" class="btn btn-default" data-method="zoom" data-option="0.1" title="放大">
                    <span class="fa fa-fw fa-search-plus"></span>
                </button>
                <button type="button" class="btn btn-default" data-method="zoom" data-option="-0.1" title="缩小">
                    <span class="fa fa-fw fa-search-minus"></span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default" data-method="move" data-option="-10"
                        data-second-option="0" title="向左移动">
                    <span class="fa fa-fw fa-arrow-left"></span>
                </button>
                <button type="button" class="btn btn-default" data-method="move" data-option="10" data-second-option="0"
                        title="向右移动">
                    <span class="fa fa-fw fa-arrow-right"></span>
                </button>
                <button type="button" class="btn btn-default" data-method="move" data-option="0"
                        data-second-option="-10" title="向上移动">
                    <span class="fa fa-fw fa-arrow-up"></span>
                </button>
                <button type="button" class="btn btn-default" data-method="move" data-option="0" data-second-option="10"
                        title="向下移动">
                    <span class="fa fa-fw fa-arrow-down"></span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default" data-method="rotate" data-option="-45" title="逆时针旋转">
                    <span class="fa fa-fw fa-rotate-left"></span>
                </button>
                <button type="button" class="btn btn-default" data-method="rotate" data-option="45" title="顺时针旋转">
                    <span class="fa fa-fw fa-rotate-right"></span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default" data-method="scaleX" data-option="-1" title="水平反转">
                    <span class="fa fa-fw fa-arrows-h"></span>
                </button>
                <button type="button" class="btn btn-default" data-method="scaleY" data-option="-1" title="左右反转">
                    <span class="fa fa-fw fa-arrows-v"></span>
                </button>
            </div>
            <div class="btn-group">
                <label class="btn btn-info btn-upload" for="inputImage" title="选择图片">
                    <input type="file" class="sr-only" id="inputImage" realName="file" accept=".jpg,.jpeg,.png,.gif,.bmp">
                    <span class="fa fa-fw fa-upload"></span> &nbsp;<b>选择图片</b>
                </label>
            </div>
            <div class="btn-group ">
                <button id="btnGetImageBase64" type="button" class="btn btn-primary" data-method="getCroppedCanvas"
                        title="Get image Base64">
                    <span class="ffa fa-check"></span>&nbsp;<b>确定上传</b>
                </button>
            </div>
        </div>
    </div>
</div>
<script src="${base}/assets/plugins/cropper/cropper.js"></script>
<script type="text/javascript">
    $.namespace('Page.UserImage');
    Page.UserImage = function () {
        var options = {
                dragMode: 'move',
                aspectRatio: 1/1,
                autoCropArea: 1,
                preview: ".img-preview",
                ready: function(){
                    $(window).resize();
                }
            },
            $image,
            URL = window.URL ,
            uploadedImageType = 'image/png',
            uploadedImageURL, imageBase64;

        return {
            init:function () {
                $("#image").attr("src",$('#avatarImg').attr('src'))
                $image = $("#image").cropper(options),
                $('.btn-group').on('click', '[data-method]', function () {
                    var $this = $(this), data = $this.data(), result,
                        cropper = $image.data('cropper'), cropped;
                    if ($this.prop('disabled') || $this.hasClass('disabled')) {
                        return;
                    }
                    if (cropper && data.method) {
                        data = $.extend({}, data); // Clone a new one
                        cropped = cropper.cropped;
                        switch (data.method) {
                            case 'rotate':
                                if (cropped && options.viewMode > 0) {
                                    $image.cropper('clear');
                                }
                                break;
                            case 'getCroppedCanvas':
                                if (uploadedImageType === 'image/jpeg') {
                                    if (!data.option) {
                                        data.option = {};
                                    }
                                    data.option.fillColor = '#fff';
                                }
                                break;
                        }
                        result = $image.cropper(data.method, data.option, data.secondOption);
                        switch (data.method) {
                            case 'rotate':
                                if (cropped && options.viewMode > 0) {
                                    $image.cropper('crop');
                                }
                                break;
                            case 'scaleX':
                            case 'scaleY':
                                $(this).data('option', -data.option);
                                break;
                            case 'getCroppedCanvas':
                                if (result) {
                                    imageBase64 = result.toDataURL(uploadedImageType);
                                    var fd = new FormData
                                    fd.append('avatarImg', Bolt.dataURLtoBlob(data));
                                    Bolt.ajax('doajax', {
                                        url: '${base}/admin/sys/user/updateAvatarImg',
                                        data:fd,
                                        contentType: false,
                                        processData: false,
                                        cache: false,
                                        loadingMask: true,
                                        okCallback: function (doc) {
                                            $("#avatarImg").attr("src", imageBase64);
                                            Bolt.dialog("closeCurrent")
                                        }
                                    })

                                }
                                break
                        }
                    }
                });
                $("#inputImage").change(function(){
                    var files = this.files, file;
                    if (!$image.data('cropper')) {
                        return;
                    }
                    if (files && files.length) {
                        file = files[0];
                        if (/^image\/\w+$/.test(file.type)) {
                            uploadedImageType = file.type;
                            uploadedImageURL = URL.createObjectURL(file);
                            $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                            $(this).val('');// 清理下，方便下次选择
                        } else {
                            js.showMessage('请选择一个图片文件。');
                        }
                    }
                    $(this).blur();
                })


            }
        }
    }();
    $(document).ready(function () {
        Page.UserImage.init();
    });
</script>
